<template>
  <div class="todo">
    <TodoForm @add="addTodo" />
    <TodoFilter @setFilter="setFilter" @clear-completed="clearCompleted" />
    <div class="todo-list">
      <div v-if="filteredTodos.length === 0" class="empty-state">
        <p v-if="filter === 'all'">还没有任务，开始添加吧！</p>
        <p v-else-if="filter === 'active'">没有进行中的任务</p>
        <p v-else>没有已完成的任务</p>
      </div>

      <TodoItem
        v-for="todo in filteredTodos"
        :key="todo.id"
        :todo="todo"
        @edit="updateTodo"
        @toggle="toggleTodo"
        @remove="removeTodo"
      />
    </div>
    <!-- 统计信息 -->
    <div class="stats">
      <p>总计: {{ totalCount }} 个任务</p>
      <p>进行中: {{ activeCount }} 个</p>
      <p>已完成: {{ completedCount }} 个</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import TodoFilter from '@/components/todo/TodoFilter.vue'
import TodoForm from '@/components/todo/TodoForm.vue'
import TodoItem from '@/components/todo/TodoItem.vue'
import { useTodo } from '@/composables/useTodo'

const {
  filter,
  filteredTodos,
  totalCount,
  activeCount,
  completedCount,
  addTodo,
  updateTodo,
  removeTodo,
  toggleTodo,
  setFilter,
  clearCompleted,
} = useTodo()
</script>

<style scoped lang="scss">
.todo-list {
  margin: 1rem 0;
}

.empty-state {
  text-align: center;
  padding: 2rem;
  color: #7f8c8d;
  background: #f8f9fa;
  border-radius: 8px;
}

.stats {
  margin-top: 2rem;
  padding: 1rem;
  background: #ecf0f1;
  border-radius: 8px;
  display: flex;
  justify-content: space-around;
}

.stats p {
  margin: 0;
  font-weight: bold;
  color: #2c3e50;
}
</style>
